<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h1>模板解析注意事项</h1>
    <h3>这是父组件</h3>
    <p>count: {{count}}</p>
    
    <hr>

    <child-component :students-count="count" @abc-xyz="count++"></child-component>
  </div>

  <script src="../Vue.js"></script>

  <script>
    const { createApp } = Vue;

    // 标签的名字，创建用大驼峰，使用用连字符
    // 自定义属性，传递的时候用连字符，接受的时候用小驼峰
    // 自定义事件，传递的时候用连字符，接受的时候用小驼峰

    // 在html里面都是用连字符的，在js里面都是用驼峰命名法
    const ChildComponent = {
      props: ["studentsCount"],
      template: `
        <h3>这是子组件 - {{studentsCount}}</h3>
      `
    }

    createApp({
      data() {
        return {
          count: 10
        }
      },
      methods: {},
      components: {
        ChildComponent
      }
    }).mount("#app")
  </script>
</body>
</html>